<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_XHR-XHR其他事件的监听</title>
  <!-- 
  在JavaScript中，XMLHttpRequest（XHR）对象不仅可以通过 `onreadystatechange` 和 `onload` 事件来处理请求的响应，还可以监听其他一些事件。这些事件可以帮助开发者更好地管理请求的状态和处理错误。
  1.  `onerror` 
  - 描述：当请求失败时触发，通常用于网络错误或请求被阻止的情况。
  - 使用示例：
  xhr.onerror = function() {
      console.error('请求失败，可能是网络问题或请求被阻止。');
  };
  2.  `onabort` 

  - 描述：当请求被中止时触发。可以通过调用 `xhr.abort()` 方法来中止请求。
  - 使用示例：
  xhr.onabort = function() {
      console.log('请求被中止。');
  };

  // 示例中止请求
  xhr.abort();
  3.  `ontimeout` 
  - 描述：当请求超时时触发。可以通过设置 `timeout` 属性来指定请求的超时时间（以毫秒为单位）。
  - 使用示例：
  xhr.timeout = 5000; // 设置超时时间为5秒
  xhr.ontimeout = function() {
      console.error('请求超时。');
  };
  4.  `onloadend` 
  - 描述：无论请求成功还是失败，都会在请求结束时触发。适合用于清理操作或隐藏加载指示器。
  - 使用示例：
  xhr.onloadend = function() {
      console.log('请求完成，无论成功或失败。');
  };
  5.  `onloadstart` 
  - 描述：当请求开始时触发，适合用于启动加载指示器。
  - 使用示例：
  xhr.onloadstart = function() {
      console.log('请求开始。');
  };
  6.  `onprogress` 
  - 描述：在请求进行中定期触发，适合用于显示加载进度。可以通过 `xhr.responseText` 或 `xhr.response` 获取部分响应数据。
  - 使用示例：
  xhr.onprogress = function(event) {
      if (event.lengthComputable) {
          const percentComplete = (event.loaded / event.total) * 100;
          console.log(`加载进度: ${percentComplete}%`);
      }
  };
  总结
  通过监听这些事件，开发者可以更全面地管理XHR请求的生命周期和状态。这些事件提供了更多的控制和反馈，以提升用户体验。例如，使用 `onerror` 和 `ontimeout` 可以有效处理请求失败的情况，而使用 `onprogress` 可以实现动态的进度指示。

  注意事项
  - 事件的顺序：通常在请求开始时触发 `onloadstart` ，然后是 `onprogress` （如果有进度），接着是 `onload` 或 `onerror` ，最后是 `onloadend` 。
  - 不同浏览器的支持：虽然XHR事件在大多数现代浏览器中都得到支持，但在某些老旧浏览器中可能会有所不同，开发时应考虑兼容性。
  -->
</head>
<body>

  <script>

    // 1. 创建一个XMLHttpRequest对象
    const xhr = new XMLHttpRequest()

    // 2. 监听请求状态的变化
    // xhr.onreadystatechange = function () {
    //   if (xhr.readyState !== XMLHttpRequest.DONE) return
    //   console.log(xhr.response);
    // }

    // onload监听数据加载完成
    xhr.onload = function () {
      console.log(xhr.response)
    }

    // 3. 配置请求信息
    xhr.open('GET', 'http://123.207.32.32:8000/home/multidata')

    // 4. 发送请求
    xhr.send()

    // 5.同步必须等到有结果后, 才会继续执行
    // console.log(xhr.response)

  </script>
  
</body>
</html>